<template>
  <!-- <a-condition :showCondition="showCondition" @closePopup="showCondition = false"></a-condition> -->
  <view>
    <u-popup :show="showPopup" :safeAreaInsetBottom="false" :round="20" mode="center">
      <view class="popup-content">
        <image class="popup-close" src="../static/w_close.png" @click="onClose" />
        <view class="popup-header">2</view>
        <scroll-view scroll-y class="scroll">
          <view class="tips u-m-b-50">1</view>
          <view class="td">
            <view class="th striped">
              3
            </view>
            <view class="th">
              3
            </view>
            <view class="th striped">
              3
            </view>
          </view>
          <view class="tips" style="margin-bottom: 120rpx;font-weight: 500;font-size: 18rpx;">333</view>
          <view class="btn">123</view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    showCondition: {
      type: Boolean,
      default: () => false
    },
  },
  watch: {
    showCondition(n) {
      this.showPopup = n
    }
  },
  mounted() {
    
  },
  data() {
    return {
      showPopup: false,
    }
  },
  methods: {
    onClose(){
      this.$emit('closePopup')
    }
  },
}
</script>

<style lang="scss" scoped>
.popup-content {
  position: relative;
  width: 644rpx;
  height: 65vh;
  .popup-close {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 70rpx;
    height: 70rpx;
  }
  .popup-header {
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
    background: rgba(56, 112, 255, 1);
    font-size: 46rpx;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 1);
  }
  .scroll {
    height: calc(65vh - 84rpx);
    padding: 48rpx 50rpx;
    .tips {
      font-size: 26rpx;
      font-weight: 900;
      color: rgba(255, 87, 51, 1);
      margin-bottom: 65rpx;
    }
    .td {
      width: 546rpx;
      margin: 0 auto;
      margin-bottom: 52rpx;
      border: 4rpx solid rgba(240, 240, 240, 1);
      .th {
        width: 100%;
        height: 52rpx;
        font-size: 18rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        view {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .striped {
        background: rgba(245, 245, 245, 1);
      }
    }
    .btn {
      width: 380rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 100rpx;
      background: rgba(56, 112, 255, 1);
      font-size: 36rpx;
      font-weight: 900;
      color: rgba(255, 255, 255, 1);
      margin: 0 auto;
    }
  }
}
</style>
